<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                        <form role="form" method="POST" name="statisticprovince">
                       <div class="form-group">
                            <div class="row">
                            <div class="col-lg-2">
                                Khu vực:
                            </div>
                            <div class="col-lg-3">
                                <?php echo $this->areaHTML ?>        
                            </div>
                            <div class="col-lg-2">
                                Tỉnh thành:
                            </div>
                            <div class="col-lg-3">
                                <?php echo $this->provinceHTML ?>     
                            </div>
                            <div class="col-lg-2">
                            <select id="showchart" name="showchart" class="form-control"> 
                                     <option value="1" <?php if($this->showchart == 1) echo 'selected=selected'; ?> >Cột</option>
                                     <option value="2" <?php if($this->showchart == 2) echo 'selected=selected'; ?>>Phần trăm</option>
                                     <option value="3" <?php if($this->showchart == 3) echo 'selected=selected'; ?>>Bảng</option>
                                 </select>
                            </div>
                        </div>
                       </div>
                            <div class="form-group">
                        <div class="row">
                            <div class="col-lg-2">
                                Từ ngày:
                            </div>
                            <div class="col-lg-3">
                                <input class="form-control" type="datetime" name="from_date" id="from_date" value="<?php echo $this->fromdate; ?>">        
                            </div>
                            <div class="col-lg-2">
                                Đến:
                            </div>
                            <div class="col-lg-3">
                                <input class="form-control" type="datetime" name="to_date" id="to_date" value="<?php echo $this->todate; ?>">        
                            </div>
                             <div class="col-lg-2">
                            <button class="btn btn-primary" type="submit" id="submit">Thống kê</button>   
                        </div>
                        </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
    $('.form-control').datepicker({showAnim: 'drop', dateFormat: 'dd-mm-yy', showWeek: false, showButtonPanel: false});
    })
</script>
<div class="row">  
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <?php if($this->showchart == 2){?>
                    <div class="col-lg-6">                        
                        <div id="container">
                        </div> 
                    </div>
                    <div class="col-lg-6">            
                        <div id="container1">
                        </div>
                    </div>
                    <?php } else {?>
                      <div class="col-lg-12">  
                            <?php if ($this->showchart == 3) { ?>
                                <div class="row">
                                    <h4>Thông kê sản phẩm Đại lý bán theo quận/huyện</h4>
                                </div>
                            <?php } ?>
                            <div class="row">
                                <div id="container">
                                </div> 
                            </div>
                        </div>  
                    <?php }?>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
     var showchart = <?php echo $this->showchart; ?>;
     if(showchart == 2)
        {
        var colors = Highcharts.getOptions().colors,        
        data = [],
        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness; 
        // init
    //var browserData=[];
    
     $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/statisticproductdistrictbuy/", 
            {
                fromdate: "<?php echo $this->fromdate; ?>",
                todate: "<?php echo $this->todate; ?>",
                area_id: "<?php echo $this->area_id; ?>",
                province_id:"<?php echo $this->province_id; ?>"
            },function (items) {                
                data = items;                
                for (i = 0; i < data.length; i += 1) {
                    // add browser data
                    browserData.push({
                        name: data[i].name,
                        y: data[i].y,
                        color: colors[data[i].color]
                    });

                    // add version data
                    drillDataLen = data[i].drilldown.data.length;
                    for (j = 0; j < drillDataLen; j += 1) {
                        brightness = 0.2 - (j / drillDataLen) / 5;
                        versionsData.push({
                            name: data[i].drilldown.categories[j],
                            y: data[i].drilldown.data[j],
                            color: Highcharts.Color(colors[data[i].color]).brighten(brightness).get()
                        });
                    }
                }    

                // Create the chart
                $('#container').highcharts({
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: 'Thống kê sản phẩm Đại lý bán theo Huyện'
                    },
                    yAxis: {
                        title: {
                            text: 'Total percent market share'
                        }
                    },
                    plotOptions: {
                        pie: {
                            shadow: false,
                            center: ['50%', '50%']
                        }
                    },
                    tooltip: {
                        valueSuffix: ''
                    },
                    series: [{
                        name: 'Số lượng',
                        data: browserData,
                        size: '60%',
                        dataLabels: {
                            formatter: function () {
                                return this.y > 5 ? this.point.name : null;
                            },
                            color: 'white',
                            distance: -30
                        }
                    }, {
                        name: 'Số lượng',
                        data: versionsData,
                        size: '80%',
                        innerSize: '60%',
                        dataLabels: {
                            formatter: function () {
                                // display only if larger than 1
                                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + ''  : null;
                            }
                        }
                    }]
                });
        });
        
     //chart 2
     var data1 = [],
        browserData1 = [],
        versionsData1 = []; 
     $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/statisticproductdistrictsale/", 
            {
                fromdate: "<?php echo $this->fromdate; ?>",
                todate: "<?php echo $this->todate; ?>",
                area_id: "<?php echo $this->area_id; ?>",
                province_id:"<?php echo $this->province_id; ?>"
            },function (items) {                
                data1 = items;                
                for (i = 0; i < data1.length; i += 1) {
                    // add browser data
                    browserData1.push({
                        name: data1[i].name,
                        y: data1[i].y,
                        color: colors[data1[i].color]
                    });

                    // add version data
                    drillDataLen = data1[i].drilldown.data.length;
                    for (j = 0; j < drillDataLen; j += 1) {
                        brightness = 0.2 - (j / drillDataLen) / 5;
                        versionsData1.push({
                            name: data1[i].drilldown.categories[j],
                            y: data1[i].drilldown.data[j],
                            color: Highcharts.Color(colors[data1[i].color]).brighten(brightness).get()
                        });
                    }
                }    

                // Create the chart
                $('#container1').highcharts({
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: 'Thống kê sản phẩm Đại lý mua theo Huyện'
                    },
                    yAxis: {
                        title: {
                            text: 'Total percent market share'
                        }
                    },
                    plotOptions: {
                        pie: {
                            shadow: false,
                            center: ['50%', '50%']
                        }
                    },
                    tooltip: {
                        valueSuffix: ''
                    },
                    series: [{
                        name: 'Số lượng',
                        data: browserData1,
                        size: '60%',
                        dataLabels: {
                            formatter: function () {
                                return this.y > 5 ? this.point.name : null;
                            },
                            color: 'white',
                            distance: -30
                        }
                    }, {
                        name: 'Số lượng',
                        data: versionsData1,
                        size: '80%',
                        innerSize: '60%',
                        dataLabels: {
                            formatter: function () {
                                // display only if larger than 1
                                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + ''  : null;
                            }
                        }
                    }]
                });
        });
    }//end showchart2
    // dang cot
    if(showchart == 1)
    {
        var categories=[];
    var series=[];

  $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/gettest2/", 
            {
                fromdate: "<?php echo $this->fromdate; ?>",
                todate: "<?php echo $this->todate; ?>",
                area_id: "<?php echo $this->area_id; ?>",
                province_id:"<?php echo $this->province_id; ?>"


            },function (items) {                
                 categories = items[0];
                 series=items[1];
                 
               

    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Thống kê sản phẩm Đại lý bán theo Quận/Huyện'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Số lượng (tấn)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} tấn</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: series
    });
    });
    }
    //end showchart dang oot
    // dang bang
    if(showchart == 3)
    {
        var source =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'id',type:'int'},
                    { name: 'district_name', type: 'string' },
                    { name: 'product_name', type: 'string' },
                    { name: 'soluong', type: 'string' }   
                ],                
                url:'<?php echo $this->baseUrl() ?>/admin/statistic/gettest5',
                data: {
                    fromdate: "<?php echo $this->fromdate; ?>",
                    todate: "<?php echo $this->todate; ?>" ,
                    area_id: "<?php echo $this->area_id; ?>",
                    province_id:"<?php echo $this->province_id; ?>"
                },
               
                sortcolumn: 'order',
                sortdirection: 'asc'
               
            };
         var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                }
            });
            $("#container").jqxGrid(
            {
                width: '100%',
                source: dataAdapter,  
                theme: 'bootstrap',
                pageable: true,
                showfilterrow: true,
                filterable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                selectionmode: 'multiplecellsadvanced',
                columnsResize: true,

                rendergridrows: function (params) {
                    return params.data;
                },
                ready: function () {
                    $("#container").jqxGrid('hideColumn', 'id');
                },
                columns: [
                  {text:'id',dataField:'id',cellsalgin:'right',width:0},
                  { text: 'Quận/Huyện', editable: false, dataField: 'district_name', width: '20%' },
                  { text: 'Loại hàng',editable: false, dataField: 'product_name', width: '60%' },
                  { text: 'Khối lượng', editable: false, dataField: 'soluong', width: '20%' }
                  
                ]
            });
    }//end showchart dang bang
    
});
</script>

